
<template>
  <div>
    <section class="header">
      <FanPageHeader current="Portfolio" 
      :img="karina6Img"
      title="一年前的合集"
      />
      <div class="waves-container">
        <Waves height="6rem" />
      </div>
    </section>
    <main class="main">
      <div class="portfolio-list">
        <FanProItem
          :link="item.link || '#'"
          v-for="item in currentPageItems"
          :key="item.id"
          :img="avatarImg"
          :publishTime="item.publishTime || '2023-01-01'"
          :title="item.name || item.title || '未命名项目'"
          :content="item.description || item.content || '暂无描述'"
          :views="item.views || 0"
          @click="handleClick(item.id)"
        />
      </div>
      <div class="pagination-container">
        <a-pagination 
          v-model:current="currentPage" 
          :total="portfolioList.length" 
          :pageSize="pageSize"
          @change="handlePageChange"
        />
      </div>
    </main>
  </div>
</template>

<script setup>

import { ref, computed, onMounted} from 'vue'
import FanPageHeader from "../../components/common/FanPageHeader.vue";
import Waves from "../../components/common/Waves.vue";
import FanProItem from "../../components/common/FanProItem.vue";
import { useProjectStore } from '../../stores/project';
const projectStore = useProjectStore();
import { FanNotification } from '../../libs/util.toast';

// 导入本地图片
import karina6Img from '@/assets/wrapper/karina6.png'
import avatarImg from '@/assets/images/avatar.png'
// 分页状态
const currentPage = ref(1)
const pageSize = 3 // 每页显示3个作品

// 项目列表数据
const portfolioList = ref([])

// 计算当前页显示的项目
const currentPageItems = computed(() => {
  const start = (currentPage.value - 1) * pageSize
  const end = start + pageSize
  return portfolioList.value.slice(start, end)
})

// 总页数
const totalPages = computed(() => Math.ceil(portfolioList.value.length / pageSize))

// 分页变化处理
const handlePageChange = (page) => {
  currentPage.value = page
}

// 获取项目列表数据
const getPortfoliosList = async () => {
  const res = await projectStore.getProjectListPinia();
  if (res.success) {
    portfolioList.value = res.data
    FanNotification.success('获取项目列表成功');
  } else {
    FanNotification.error(res.data);
  }
}
onMounted(() => {
  getPortfoliosList();
});

// 点击项目处理  增加views
const handleClick = async(id) => {
    const res = await projectStore.addProjectViews(id);
    if (res.success) {
      // 更新本地数据的views
      const item = portfolioList.value.find(item => item.id === id);
      if (item) {
        item.views = (item.views || 0) + 1;
      }
    } 

}
</script>

<style scoped lang="scss">
/* Header 样式 */
.header {
  position: relative;
  width: 100%;
  flex-shrink: 0;
}
/* Waves 包装器 - 确保波浪只覆盖图片下部分 */
.waves-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10rem;
  pointer-events: none; /* 确保不拦截鼠标事件 */
}

/* Main容器 */
.main {
  padding: 2rem 0;
  max-width: 1400px; /* 增加主容器最大宽度 */
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center; /* 主容器内容水平居中 */
}

/* 分页容器 */
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  padding: 2rem 0;
}

/* 单列布局 - 每页3个项目 */
.portfolio-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐 */
  margin-bottom: 3rem;
  max-width: 1200px; /* 进一步增加容器宽度，两边留白 */
  margin-left: auto;
  margin-right: auto;
  padding: 0 1.5rem; /* 调整两边留白 */
}

.portfolio-item {
  width: 100%;
  max-width: 1000px; /* 进一步增加项目最大宽度，确保一致 */
  display: flex; /* 确保项目容器正确显示 */
  justify-content: center; /* 项目居中显示 */
  align-items: center; /* 项目垂直居中对齐 */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .portfolio-list {
    max-width: 100%;
    padding: 0 1rem; /* 移动端调整留白 */
  }
  
  .portfolio-item {
    max-width: 100%;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .portfolio-list {
    max-width: 1100px; /* 中屏进一步增加容器宽度 */
  }
  
  .portfolio-item {
    max-width: 900px; /* 中屏进一步增加项目宽度 */
  }
}


</style>

